<template>
    <div class="personal d-flex">
        <div class="info">
            <a-drawer
                title="个人信息"
                placement="left"
                :closable="true"
                :visible="visible"
                @close="onClose"
                :mask="false"
                :width="320"
                :headerStyle="{height: '50px'}"
                :bodyStyle="bodyStyle"
            >
                <a-avatar :size="64" icon="user"></a-avatar>
                <br>

                <h4>王朗</h4>
                <br>

                <div>管理员</div>
                <br>

                <div>这个人很懒，什么都没有说</div>
                <br>

                <div class="d-flex justify-content-around w-100">
                    <a-button type="primary">标签1</a-button>
                    <a-button type="primary">标签2</a-button>
                    <a-button type="primary">标签3</a-button>
                </div>
                <br>

                <a-button type="primary" class="w-50"><router-link @click.native="current=[]" :to="{name:'setting'}">个人设置</router-link></a-button>
                <br>

                <div class="w-100 border" style="height: 190px;text-align: center;line-height: 190px;">未来功能拓展区</div>
            </a-drawer>
            <a-button type="primary" @click="showDrawer" id="toggleDrawer"><a-icon type="idcard" style="font-size: 27px;"/>&gt;</a-button>
        </div>

        <div class="content" :class="{'content-fluid':!visible}">
            <div class="personal-nav">
                <a-menu v-model="current" mode="horizontal">
                    <a-menu-item key="message">
                        <a-icon type="sound" style="font-size: 16px;"/>
                        <router-link :to="{name: 'message'}">消息通知中心</router-link>
                    </a-menu-item>
                    <a-menu-item key="dorm">
                        <a-icon type="home" style="font-size: 16px;"/>
                        <router-link :to="{name: 'dorm'}">个人宿舍管理</router-link>
                    </a-menu-item>
                    <a-menu-item key="query">
                        <a-icon type="eye" style="font-size: 16px;"/>
                        <router-link :to="{name: 'query'}">申请业务查询</router-link>
                    </a-menu-item>
                </a-menu>
            </div>

<!--            <div class="main" :class="{'container':!visible}">-->
            <div class="main">
                <router-view/>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "Personal",
    data() {
        return {
            current: [location.pathname.slice(location.pathname.lastIndexOf("/")+1)],
            visible: true,
            bodyStyle: {
                display: "flex",
                flexDirection: "column",
                justifyContent: "center",
                alignItems: "center",
            }
        }
    },
    methods: {
        showDrawer() {
            this.visible = true;
        },
        onClose() {
            this.visible = false;
        },
    }
}
</script>

<style scoped>
    .info{
        position: relative;
    }
    #toggleDrawer{
        position: absolute;
        right: -10px;
        top: 27px;
        width: 60px;
        height: 45px;
        transition: all .3s;
        z-index: 1;
    }
    #toggleDrawer:hover{
        right: -50px;
    }
    .content {
        position: fixed;
        left: 320px;
        top: 0;
        width: calc(100vw - 320px);
        height: 100%;
        transition: all .3s ease;
    }

    .content-fluid{
        left: 0;
        width: 100vw;
    }

    .content a {
        display: inline-block;
        vertical-align: middle;
    }

    .content .main {
        padding: 50px;
        height: 100%;
        overflow: auto;
    }
</style>
